<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="../../build/common/base.css" rel="stylesheet">

  <link rel="stylesheet" href="../../build/form/form.css">
  <link rel="stylesheet" href="../../build/form/page.css">
  <link rel="stylesheet" href="../../assets/js/common/element/index.css">
  <script type="text/javascript" src="../../build/common/base.js"></script>
  <script type="text/javascript" src="../../build/common/vueEdit.js"></script>
  <script src="../../assets/js/common/element/index.js"></script>
  <style>
    * {
      padding: 0px;
      margin: 0px;
    }

    ul li {
      list-style: none;
    }

    .my_table_box {
      display: flex;
      padding: 10px;
    }

    .link {
      height: 100%;
      width: 8px;
      background-color: #ccc;
    }

    .seek_box {
      padding: 20px;
    }

    .my_table thead th {
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <div id="ctrls">
    <div class="seek_box">
      <label class="pt5 cell-nowarp overflow-eps fl pr10 lh24 ng-binding">物料编码:</label>
      <input type="text" class="form-control wd180 animated-w" v-model="seek">
      <button @click="seekHand()" class="btn btn-primary">查询</button>
    </div>
    <div class="my_table_box">
      <table class="my_table table table-striped table-bordered table_hover text-center mb60">
        <thead>
          <tr>
            <th>序号</th>
            <th>物料编码</th>
            <th>产品名称</th>
            <th>市场价(面价)</th>
            <th>工程价(折扣价)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in veList">
            <td>{{index+1}}</td>
            <td><span v-show="item.wlbm != 'false'">{{item.wlbm}}</span></td>
            <td><span v-show="item.cpmc != 'false'">{{item.cpmc}}</span></td>
            <td>
              <span v-show="item.scj != 'false'">{{item.scj}}</span>
            </td>
            <td style="white-space: nowrap;">
              <span v-show="item.gcjg1 != 'false'">{{item.gcjg1}},</span>
              <span v-show="item.gcjg2 != 'false'">{{item.gcjg2}},</span>
              <span v-show="item.gcjg3 != 'false'">{{item.gcjg3}}</span>
            </td>

          </tr>
        </tbody>
      </table>
      <div class="link">

      </div>
      <table class="my_table table table-striped table-bordered table_hover text-center mb60">
        <thead>
          <tr>
            <th>序号</th>
            <th>物料编码</th>
            <th>产品名称</th>
            <th>市场价(面价)</th>
            <th>工程价(折扣价)</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in veList">
            <td>{{index+1}}</td>
            <td><span v-show="item.wlbms != 'false'">{{item.wlbms}}</span></td>
            <td><span v-show="item.ascpmc != 'false'">{{item.ascpmc}}</span></td>
            <td>
              <span v-show="item.scjs != 'false'">{{item.scjs}}</span>
            </td>
            <td style="white-space: nowrap;">
              <span v-show="item.gcjg1s != 'false'">{{item.gcjg1s}},</span>
              <span v-show="item.gcjg2s != 'false'">{{item.gcjg2s}},</span>
              <span v-show="item.gcjg3s != 'false'">{{item.gcjg3s}}</span>
            </td>
            <td><a @click="handMsk(item.idlv,item.duibiid)" href="jacascript:;"
                class="btn btn-primary btn-sm mr5 btn-outline">
                <i class="fa fa-edit mr5">
                  替换
                </i>
              </a></td>
          </tr>

        </tbody>
      </table>

    </div>
  </div>
</body>
<script type="text/javascript">
  var vm = new Vue({
    el: "#ctrls",
    data: function () {
      return {
        test: "测试",
        veList: [],
        seek: "",
        rwid: ""
      }
    },
    beforeCreate: function () {
    },
    mounted: function () {
      // var ztreeCreator = new ZtreeCreator('orgTree', __ctx + "/org/group/getTreeData")
      //   .setCallback({ onClick: zTreeOnLeftClick, onRightClick: zTreeOnRightClick })
      //   .initZtree({}, function (treeObj) { orgTree = treeObj });

    },
    created: function () {
      this.rwid = location.search.replace("?", "")
      var that = this
      var url = "http://127.0.0.1:18084/sys/amaterialversion/lists"
      var post = Vue.baseService.post(url);
      post.then(function (res) {
        console.log(res, "ve清单")
        that.veList = res
      }, function (status) {
        if (status == !0) {
          $.Toast.error('加载失败！' + status);
        }
      })
    },
    methods: {

      handMsk: function (id, duibiid) {
        var id = id
        var duibiid = duibiid
        console.log("iddadad", id, duibiid)
        var index = layer.open({
          type: 2,
          content: './cailiaoban.html?' + id,
          // content: '../../form/formCustSql/view/formCustSqlView.html?code=项目ve清单-变更',
          area: ['320px', '195px'],
          maxmin: true
        });
        layer.full(index);
      },
      seekHand: function () {
        var that = this
        var url = Vue.__ctx + "/form/formCustSql/view/list_vuMateinfo";
        var post = Vue.baseService.post(url, {
          curPage: 1,
          pageSize: 1011,
          params: { "queryData": [{ "name": "wlbm", "con": "like", "val": that.seek }] }
        });
        $.getResultData(post, function (data) {
          that.veList = data.list
        });
      }

    },

    watch: {

    }
  });
</script>

</html>